<template>
	<view class="decive">
		<!-- 顶部导航 -->
		<view class="decive_tab">
			<view class="tabItem" :class="{'active' : index == tabItemListIndex}" @click="clickTab(index)"
				v-for="(item,index) in tabItemList" :key="index">
				{{item.name}}
			</view>
		</view>

		<!-- 数据列表 -->
		<view class="deviceList Column" v-if="deviceList.length != 0">
			<checkbox-group @change="onChange">
				<view :class="tabItemListIndex ? 'deviceList_items flex-row': 'deviceList_items Column' "
					v-for="(item,index) in deviceList" :key="index">
					<checkbox class="checkboxs" :value="item.deviceSn" :checked="item.checked"
						v-if="tabItemListIndex == 1 && isAllocate">
					</checkbox>

					<view style="width: 100%;" class="Column">
						<view class="flex-row items-center justifyCont-bet">
							<view class="header flex-row items-center">
								<text class="iconfont deviceIcon">&#xe60c;</text>
								<view :class=" item.onlineStatus == '1' ? 'zaiXian' : 'liXian' "></view>
							</view>

							<view class="footer Column" :style=" tabItemListIndex ? 'width: 52%;' : 'width: 58%;'">
								<view class="paddingBot4 items-center" @click="deviceEdit(item)">{{item.deviceName}}
									<text class="iconfont bianJi">&#xe7ed;</text>
								</view>
								<view class="deviceSn fontSize14">{{item.deviceSn}}</view>
							</view>

							<navigator :url="`/pages/mine/device/deviceDetail/deviceDetail?deviceSn=${item.deviceSn}`"
								hover-class="none" class="flex-row items-center">
								<view class="Column items-center">
									<view
										:class=" item.onlineStatus == '1' ? 'onlineStatus fontSize14 paddingBot4' : 'onlineStatuss fontSize14 paddingBot4'"
										v-if="!tabItemListIndex">
										{{ item.onlineStatus == '1' ? '在线' : '离线' }}
									</view>
									<view class="weiJiHuo" v-else>
										未激活
									</view>
									<view class="fontSize14 flex-row items-center">
										{{item.operator}}
									</view>
								</view>

								<view class="iconfont seeMore">&#xe60e;</view>
							</navigator>
						</view>

						<view class="cardContent flex-row items-center" v-if="!tabItemListIndex">
							<view class="cardContentItems Column items-center">
								<view class="paddingBot6 colorA7 fontSize14">昨日收益</view>
								<view class="">+{{item.yesterdayReward}}</view>
							</view>
							<view class="cardContentItems Column items-center">
								<view class="paddingBot6 colorA7 fontSize14">昨日跑量</view>
								<view class="">{{item.yesterdayBandwidth}}</view>
							</view>
							<view class="cardContentItems Column">
								<view class=""></view>
								<view class=""></view>
							</view>
						</view>

						<view class="footer flex-row items-center justifyCont-bet" style="padding-top: 12px;">
							<view class="fontSize14 deviceSn">创建时间 {{item.createtime}}</view>
							<view class="footer_items" @click="deleteBindDevice(item.deviceSn)"
								v-if="!tabItemListIndex">解绑
							</view>
							<view class="footer_items goTo" @click="goToActivate(item)" v-else>去激活
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		<view class="null flex-row items-center" v-else>
			<image style="width: 160px;height: 160px;" src="/static/list.png" mode="aspectFit"></image>
		</view>

		<!-- 添加设备 -->
		<navigator class="plus flex-row items-center" url="/pages/mine/device/addBindDevice" hover-class="none">
			<u-icon name="plus" color="#fff" size="32"></u-icon>
		</navigator>

		<!-- 修改保管人 -->
		<view class="addressChoose Row" v-if="tabItemListIndex == 1">
			<button type="primary" size="mini" class="btn" @click="clickIsAllocate" v-if="!isAllocate">去划拨</button>
			<button type="primary" size="mini" class="btn" @click="open" v-else>划拨</button>
		</view>
		<!-- 修改保管人弹出层 -->
		<u-popup :round="8" customStyle="width:80%;" :show="transferShow" mode="center" @close="close" @open="open">
			<view class="codeBox Column">
				<input class="input" placeholder="请输入保管员手机号" type="number" v-model="mobile" @input="setMobile" />
			</view>

			<view class="transferFooter Column">
				<view class="confirm" @click="modifyCustodian"> 确认划拨 </view>
				<view class="closeText" @click="close">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		apiDeviceList,
		apiDeleteBindDevice,
		apiStoreDeviceList,
		apiBatchChange
	} from '@/api/device.js';

	export default {
		data() {
			return {
				transferShow: false,
				deviceSnArray: [],
				mobile: '',

				tabItemList: [{
					name: "已绑定",
					type: "device",
				}, {
					name: "未激活",
					type: "store",
				}],
				tabItemListIndex: 0,
				type: 'device',
				isAllocate: false, // 去划拨

				deviceList: [],
				current_page: 1,
				last_page: 1
			};
		},
		onUnload() {
			uni.$off('deviceList');
		},
		onLoad() {
			let that = this;
			uni.$on('deviceList', function(data) {
				if (data.page) {
					that.current_page = 1;
					that.last_page = 1;
					that.deviceList = [];
					that.tabItemListIndex = 0;
					that.getDeviceList();
				}
			})
			that.getDeviceList();
		},
		methods: {
			goToActivate(item) {
				uni.navigateTo({
					url: '/pages/mine/device/addBindDevice?deviceSn=' + item.deviceSn + '&deviceName=' +
						item.deviceName
				})
			},

			setMobile(e) {
				let Val = e.detail.value.trim();
				this.mobile = Val;
			},
			open() {
				this.transferShow = true;
			},
			close() {
				this.transferShow = false;
			},

			clickIsAllocate() {
				this.isAllocate = true;
			},

			modifyCustodian() {
				let that = this;
				if (that.deviceSnArray.length == 0) {
					uni.$u.toast("保管设备不能为空");
					return;
				}
				if (that.mobile == '') {
					uni.$u.toast("保管人手机号必填");
					return;
				}

				console.log(that.deviceSnArray, that.mobile)
				apiBatchChange({
						params: {
							deviceSnArray: that.deviceSnArray,
							mobile: that.mobile,
						}
					})
					.then(res => {
						if (!res.code) {
							uni.$u.toast(res.msg);
							return;
						}
						uni.$u.toast("操作成功");
						setTimeout(() => {
							that.close();
							that.refreshList("store");
						}, 1000)
					}).catch(err => console.log(err))
			},

			onChange(e) {
				this.deviceSnArray = e.detail.value;
			},

			// 顶部导航切换
			clickTab(index) {
				if (index == this.tabItemListIndex) {
					return;
				}
				this.tabItemListIndex = index;
				this.type = this.tabItemList[index].type;
				this.refreshList(this.type);
			},

			refreshList(data) {
				this.current_page = 1;
				this.last_page = 1;
				this.deviceList = [];
				this.getDeviceList(data);
			},

			deviceEdit(item) {
				uni.navigateTo({
					url: '/pages/mine/device/addBindDevice?type=Edit&deviceSn=' + item.deviceSn + '&deviceName=' +
						item.deviceName
				})
			},

			getDeviceList(data) {
				let that = this;
				let apiPath;
				if (data == "store") {
					apiPath = apiStoreDeviceList;
				} else {
					apiPath = apiDeviceList;
				}

				apiPath({
						params: {
							is_bind: data == "store" ? 0 : '',
							page: that.current_page
						}
					})
					.then(res => {
						let array = res.data.data;
						array.forEach(element => {
							element.checked = false;
							that.deviceList.push(element);
						})
						that.last_page = res.data.last_page;
					}).catch(err => console.log(err))
			},

			// 删除绑定
			deleteBindDevice(deviceSn) {
				let that = this;
				uni.showModal({
					content: '是否解除该设备绑定？',
					confirmColor: '#fc4241',
					success: ({
						cancel
					}) => {
						if (cancel) return
						apiDeleteBindDevice({
								deviceSn
							})
							.then(res => {
								if (res.code == 0) {
									uni.$u.toast(res.msg);
									return;
								}
								uni.$u.toast("解绑成功");
								that.refreshList("device");
							}).catch(err => console.log(err))
					}
				})
			},
		},
		onReachBottom() {
			let that = this;
			that.current_page++;
			if (that.current_page > that.last_page) {
				uni.$u.toast("暂无更多~");
				return;
			}
			that.getDeviceList();
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}

	.goTo {
		color: #0056FF !important;
		border: 1px solid #007aff !important;
	}

	.fontSize14 {
		font-size: 14px;
	}

	.seeMore {
		color: #a7a7a7;
		font-size: 20px;
		margin-left: 4px;
		transform: rotate(90deg);
	}

	.paddingBot6 {
		padding-bottom: 6px;
	}

	.colorA7 {
		color: #a7a7a7;
	}

	.bianJi {
		color: #007aff;
		font-size: 20px;
		margin-left: 5px;
	}

	.decive {
		padding: 0 12px 12px;

		/* 切换菜单 */
		&_tab {
			width: 100%;
			display: flex;
			background-color: #fff;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 9;

			.tabItem {
				width: 100%;
				text-align: center;
				color: #7E7E9A;
				font-size: 32rpx;
				padding: 24rpx 0;
			}

			.active {
				color: black;
				font-size: 32rpx;
				font-weight: bold;
				position: relative;
			}

			.active:after {
				content: '';
				width: 18%;
				height: 6rpx;
				border-radius: 30rpx;
				background: linear-gradient(to right, #0056FF, #cccbff);
				/* 从红色渐变到蓝色 */
				opacity: 0.7;

				position: absolute;
				left: 42%;
				bottom: 12rpx;
			}
		}

		.null {
			width: 100%;
			height: 94vh;
			justify-content: center;
		}

		.deviceList {
			width: 100%;
			margin-top: 54px;


			&_items:last-child {
				margin-bottom: 0;
			}

			&_items {
				flex: 1;
				background-color: #fff;
				border-radius: 6px;
				box-shadow: 2px 2px 10px #e6e6e6;
				padding: 12px;
				margin-bottom: 12px;

				.checkboxs {
					display: inline-block;
					text-align: center;
					line-height: 76px;
					padding-right: 8px;
				}

				.header {
					width: 14%;
					justify-content: center;
					font-size: 17px;
					position: relative;

					.zaiXian,
					.liXian {
						padding: 6px;
						border-radius: 50px;
						position: absolute;
						right: 0;
						bottom: 0;
					}

					.zaiXian {
						background-color: #23c96d;
					}

					.liXian {
						background-color: #b4b4b4;
					}

					.deviceIcon {
						font-size: 40px;
					}
				}

				.cardContent {
					justify-content: space-around;
					border-radius: 6px;
					background-color: #f3f6f9;
					padding: 12px;
					margin-top: 12px;

					.cardContentItems {
						justify-content: center;
						width: 33.3%;
					}
				}

				.createtime {
					padding: 12px 0 0;
				}

				.weiJiHuo {
					color: #a7a7a7;
				}

				.onlineStatus {
					color: #23c96d;
				}

				.onlineStatuss {
					color: #a7a7a7;
				}

				.footer {

					&_items {
						color: #fc4241;
						font-size: 13px;
						text-align: center;
						border: 1px solid #fc4241;
						border-radius: 4px;
						padding: 5px 14px;
						margin-left: 12px;
					}
				}

				.deviceSn {
					color: #a7a7a7;
				}

				.paddingBot4 {
					padding-bottom: 4px;
				}

				.areaName {
					width: 50px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.operator {
					width: 1px;
					background-color: #1a1a1a;
					height: 12px;
					margin: 0 4px;
				}
			}
		}

		.plus {
			z-index: 9;
			background-color: #007aff;
			border-radius: 50px;
			padding: 10px;
			position: fixed;
			right: 6vw;
			bottom: 18vh;
		}
	}

	.codeBox {
		width: 100%;
		align-items: center;
		padding: 40px 0 0;

		.input {
			width: 83%;
			text-align: center;
			border-bottom: 1px solid #b9b9b9 !important;
			padding: 8px;
		}
	}

	.transferFooter {
		padding: 12px 0 24px;

		.confirm {
			width: 92%;
			color: #fff;
			text-align: center;
			font-size: 30rpx;
			border: none;
			border-radius: 40rpx;
			box-sizing: border-box;
			background: #0056FF;
			padding: 16rpx 0;
			margin: 12px;
		}

		.closeText {
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			box-sizing: border-box;
		}
	}

	.addressChoose {
		z-index: 3;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;

		.btn {
			width: 100%;
			font-size: 30rpx;
			border: none;
			border-radius: 40rpx;
			box-sizing: border-box;
			background: #0056FF;
			padding: 8rpx 0;
			margin: 12px;
		}
	}
</style>